<!--
 * @Description: 主页tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: LALA
 * @LastEditTime: 2022-01-06 13:58:42
-->
<template>
  <div class="order">
    <van-nav-bar title="我的工单"></van-nav-bar>
    <!-- 标签页区域 -->
    <van-tabs @click="tabClickHandler" v-model="active">
      <van-tab title="全部"></van-tab>
      <van-tab title="进行中"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>
    <div class="orderList">
      <div
        class="box"
        v-for="(item, index) in orderList"
        :key="index"
        @click="$router.push({ path: '/manager/complete', query: { item: item } })"
      >
        <div class="left">
          <img width="70px" src="../../assets/全部订单.png" alt="" />
        </div>
        <div class="right">
           <!-- <div><strong>项目名称：</strong>{{ item.engineer_name }}</div>
            <div><strong>设备名称：</strong>{{ item.device_name }}</div> -->
          <div><strong>工单状态：</strong><span style="color: blue">{{ item.status}}</span></div>
          <div><strong>工单类型：</strong>{{ item.type }}</div>
          <div><strong>申报时间：</strong>{{ item.create_time | datefmt }}</div>
           <div><strong>完成时间：</strong><span v-if="item.finish_time == null">暂无</span>
            <span v-else>{{ item.finish_time | datefmt }}</span></div>
        </div>
      </div> 
    </div>
  </div>
</template>
<script>
// 请求方法的导入
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      active: 1,
      params: {
        page:1,
        pageSize:100,
        status: "", 
      },
      orderList: [],
    };
  },
  methods: {
    getAllWorkKerOrdersByType() {
      switch (this.active) {
        case 0:
          break;
        case 1:
          this.params.status = "进行中";
          break;
        case 2:
          this.params.status = "已完成";
          break;
      }
      get("/workorder/pageQuery", this.params).then((res) => {
        this.orderList = res.data.list;
      });
    },
     // tab标签点击处理函数
     tabClickHandler(name, title) {
       if (title == "全部") {
         this.params = {
           page: 1,
           pageSize:100,
           status: "进行中",
         };
       } else{
         this.params.status = title;
       }
       //重载数据
       this.getAllWorkKerOrdersByType();
     }
  },
  created() {
    this.getAllWorkKerOrdersByType();
  },
};
</script>
<style scoped>
.box {
  height: 90px;
  margin: 10px 20px;
  padding: 10px;
  border: 1px solid rgb(156, 154, 154);
  border-radius: 5px;
  display: flex;
  cursor: pointer;
}
.left {
  width: 85px;
}
.right {
  width: calc(100% - 85px);
}
.right > div {
  height: 24px;
  line-height: 24px;
  font-size: 16px;
}
</style>

